$f: 19.2;

.home {
  // position: relative;
  width: 100%;
  .container{
    padding: 177/$f+vw 167/$f+vw 0 167/$f+vw;
    background: #F9F6F1;
    position: relative;
    .bg {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      overflow: hidden;
      max-height: 100%;
      img {
        display: block;
        max-height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
  
    .main {
      background: #FFF;
      padding: 70/$f+vw 130/$f+vw 98/$f+vw 130/$f+vw;
      position: relative;
      z-index: 10;
      .t{
        color: #000;
        font-size: 26/$f+vw;
        text-align: center;
        font-weight: 700;
      }
      .t2{
        margin: 30/$f+vw auto 40/$f+vw auto;
        color: #666;
        font-size: 18/$f+vw;
        text-align: center;
        // width: 821/$f+vw;
        line-height: 1.6;
      }
      .content{
        display: flex;
        justify-content: space-between;
        align-items:flex-end;
        position: relative;
        &::after{
          content:'';
          display: block;
          background: #F7F8FA;
          position: absolute;
          right:0;
          bottom:-48/$f+vw;
          width: 80%;
          height: 100%;
          z-index: -1;
        }
        .pic1{
          width: 50%;
          overflow: hidden;
          img{
            width: 100%;
            display: block;
            object-fit: cover;
            transition: all 600ms;
          }
          &:hover{
            img{
              transform: scale(1.05);
            }
          }
        }
        .text{
          width: 50%;
          padding: 0 70/$f+vw;
          .p1{
            color: #000;
            font-size: 26/$f+vw;
            font-weight: 700;
          }
          .des{
            color: #000;
            font-size: 18/$f+vw;
            margin: 30/$f+vw 0 48/$f+vw 0;
            line-height: 1.6;
            text-align: justify;
          }
        }
      }
      .content2{
        margin: 172/$f+vw 0 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 96/$f+vw;
        .item{
          width: 50%;
          background: #F7F8FA;
          padding: 60/$f+vw 102/$f+vw;
          height: 260/$f+vw;
          .st{
            color: #000;
            font-size: 26/$f+vw;
            text-align: center;
          }
          .des{
            color: #666;
            font-size: 18/$f+vw;
            line-height: 1.6;
            margin-top: 35/$f+vw;
            text-align: center;
          }
        }
      }
    }
  }



  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .container{
      padding: 20px 5% 60px 5%;
      .main{
        padding: 20px;
        .t{
          font-size: 18px;
        }
        .t2{
          margin:15px 0;
          width: 100%;
          font-size: 16px;
        }
        .content{
          flex-direction: column;
          &::after{
            width: 100%;
            bottom:0;
          }
          .pic1{
            width: 100%;
          }
          .text{
            width: 100%;
            padding:16px;
            .p1{
              font-size: 16px;
            }
            .des{
              font-size: 16px;
              margin-top: 10px;
            }
          }
        }
        .content2{
          margin: 20px 0;
          flex-direction: column;
          .item{
            width: 100%;
            height: auto;
            padding: 30px;
            .st{
              font-size: 18px;
            }
            .des{
              font-size: 16px;
              margin-top: 25px;
            }
          }
        }
      }
    }
  }
}